<template>
  <div class>
    <h1>微信公众号jssdk支付</h1>
    <br />
    <br />
    <button @click="goPay">支付0.01元</button>
  </div>
</template>

<script>
// 因为支付只能是认证的 服务号 所以这里不能是测试号
const appid = "wx7640ff0e16925d0d";
// 必须用80端口
const serveHost = "http://www.bufantec.com";
//调用支付的页面host
const localHost = "http://bufantec.natapp1.cc";
// 重定向url
const redirectUrl = `${localHost}/jspay`;
// 支付请求
var payApi = `${serveHost}/wx/pay/paySign?openId=`;
// 引导用户获取用于换取openId的code的url
var baseCodeApi = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirectUrl}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`;
import axios from "axios";

export default {
  components: {},
  data() {
    return {
      openId: "",
      code: ""
    };
  },
  computed: {},
  created() {
    this.initOpenId();
  },
  mounted() {},
  methods: {
    initOpenId() {
      var that = this;
      this.code = this.getUrlParams("code");

      // 先授权 获取openid
      if (this.code) {
        // 换取openId
        var url = `${serveHost}/wx/user/getOpenId?code=${this.code}&appid=${appid}`;
        axios.get(url).then(res => {
          that.openId = res.data.data.openid;
        });
      } else {
        //引导用户获取code
        window.location.href = baseCodeApi;
      }
    },
    goPay() {
      if (!this.openId) {
        alert("请先获取openId");
        return;
      }
      // 拼接openId
      payApi += this.openId;
      axios.get(payApi).then(res => {
        console.log(res);
        var params = JSON.parse(res.data.data)
        // 唤醒支付
        WeixinJSBridge.invoke(
          "getBrandWCPayRequest",
          {
            // appId: appid, //公众号名称，由商户传入
            // timeStamp: "1395712654", //时间戳，自1970年以来的秒数
            // nonceStr: "e61463f8efa94090b1f366cccfbbb444", //随机串
            // package: "prepay_id=u802345jgfjsdfgsdg888",
            // signType: "MD5", //微信签名方式：
            // paySign: "70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名
            ...params
          },
          function(res) {
              // 等待用户支付的结果
            if (res.err_msg == "get_brand_wcpay_request:ok") {
              // 使用以上方式判断前端返回,微信团队郑重提示：
              //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
              alert('支付ok!');
              // 应该和自己的服务器协商 发送请求 跟后台确认当前支付状态是否成功 避免后台网络不好造成的前台重复支付!!!
              
            }
          }
        );
      });
    },
    // 从url获取指定key的值
    // 比如url = xxx.com?k1=v1&k2=v2&k3=v3...    getUrlParams(k1) ==> v1 ;..
    getUrlParams(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); //定义正则表达式
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    }
  }
};
</script>

<style scoped lang="scss">
</style>
